        <!DOCTYPE html>
        <html>
        <head>
                <meta charset="utf-8">
        <title>ViewportTransform class / box2d Library / Dart Documentation</title>
        <link rel="stylesheet" type="text/css"
            href="../styles.css">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="../favicon.ico">
        
        </head>
        <body data-library="box2d" data-type="ViewportTransform">
        <div class="page">
        <div class="header">
          <a href="../index.html"><div class="logo"></div></a>
          <a href="../index.html">Dart Documentation</a>
         &rsaquo; <a href="../box2d.html">box2d</a> &rsaquo; <a href="../box2d/ViewportTransform.html">ViewportTransform</a>        <div id="search-box">
          <input type="search" name="q" id="q" autocomplete="off"
              class="search-input" placeholder="Search API">
        </div>
        
      </div>
      <div class="drop-down" id="drop-down"></div>
      
        <div class="nav">
        
</div>
<div class="content">
        <h2><strong>ViewportTransform</strong>
          class
        </h2>
        
<button id="show-inherited" class="show-inherited">Hide inherited</button>
<div class="doc">
<pre class="source">
class ViewportTransform {
 ViewportTransform(vec2 e, vec2 c, num s) :
   extents = new vec2.copy(e),
   center = new vec2.copy(c),
   scale = s;

 /**
  * if we flip the y axis when transforming.
  */
 bool yFlip;

 /**
  * This is the half-width and half-height.
  * This should be the actual half-width and 
  * half-height, not anything transformed or scaled.
  */
 vec2 extents;

 /**
  * Returns the scaling factor used in converting from world sizes to rendering
  * sizes.
  */
 num scale;
 
 /**
  * center of the viewport.
  */
 vec2 center;

 /**
  * Sets the transform's center to the given x and y coordinates,
  * and using the given scale.
  */
 void setCamera(num x, num y, num s) {
   center.setComponents(x,y);
   scale = s;
 }

 /**
  * The current translation is the difference in canvas units between the
  * actual center of the canvas and the currently specified center. For
  * example, if the actual canvas center is (5, 5) but the current center is
  * (6, 6), the translation is (1, 1).
  */
 vec2 get translation =&gt; extents - center;
 void set translation(vec2 translation) {
   center.copyFrom(extents).sub(translation);
 }

 /**
  * Takes the world coordinate (argWorld) puts the corresponding
  * screen coordinate in argScreen.  It should be safe to give the
  * same object as both parameters.
  */
 void getWorldToScreen(vec2 argWorld, vec2 argScreen) {
   // Correct for canvas considering the upper-left corner, rather than the
   // center, to be the origin.
   num gridCorrectedX = (argWorld.x * scale) + extents.x;
   num gridCorrectedY = extents.y - (argWorld.y * scale);

   argScreen.x = gridCorrectedX + translation.x;
   argScreen.y = gridCorrectedY - translation.y;
 }

 /**
  * Takes the screen coordinates (argScreen) and puts the
  * corresponding world coordinates in argWorld. It should be safe
  * to give the same object as both parameters.
  */
 void getScreenToWorld(vec2 argScreen, vec2 argWorld) {
   num translationCorrectedX = argScreen.x - translation.x;
   num translationCorrectedY = argScreen.y + translation.y;

   num gridCorrectedX = (translationCorrectedX - extents.x) / scale;
   num gridCorrectedY = ((translationCorrectedY - extents.y) * -1) / scale;
   argWorld.x = gridCorrectedX;
   argWorld.y = gridCorrectedY;
 }
}
</pre>
</div>
<h3>Subclasses</h3>
<p>
<span class="type-box"><span class="icon-class"></span><a href="../box2d_browser/CanvasViewportTransform.html">CanvasViewportTransform</a></span></p>
<div>
<h3>Constructors</h3>
<div class="method"><h4 id="ViewportTransform">
<button class="show-code">Code</button>
new <strong>ViewportTransform</strong>(<a href="../vector_math/vec2.html">vec2</a> e, <a href="../vector_math/vec2.html">vec2</a> c, num s) <a class="anchor-link" href="#ViewportTransform"
              title="Permalink to ViewportTransform.ViewportTransform">#</a></h4>
<div class="doc">
<pre class="source">
ViewportTransform(vec2 e, vec2 c, num s) :
 extents = new vec2.copy(e),
 center = new vec2.copy(c),
 scale = s;
</pre>
</div>
</div>
</div>
<div>
<h3>Properties</h3>
<div class="field"><h4 id="center">
<button class="show-code">Code</button>
<a href="../vector_math/vec2.html">vec2</a>         <strong>center</strong> <a class="anchor-link"
            href="#center"
            title="Permalink to ViewportTransform.center">#</a>
        </h4>
        <div class="doc">
<pre class="source">
center
</pre>
</div>
</div>
<div class="field"><h4 id="extents">
<button class="show-code">Code</button>
<a href="../vector_math/vec2.html">vec2</a>         <strong>extents</strong> <a class="anchor-link"
            href="#extents"
            title="Permalink to ViewportTransform.extents">#</a>
        </h4>
        <div class="doc">
<pre class="source">
extents
</pre>
</div>
</div>
<div class="field"><h4 id="scale">
<button class="show-code">Code</button>
num         <strong>scale</strong> <a class="anchor-link"
            href="#scale"
            title="Permalink to ViewportTransform.scale">#</a>
        </h4>
        <div class="doc">
<pre class="source">
scale
</pre>
</div>
</div>
<div class="field"><h4 id="translation">
<button class="show-code">Code</button>
<a href="../vector_math/vec2.html">vec2</a>         <strong>translation</strong> <a class="anchor-link"
            href="#translation"
            title="Permalink to ViewportTransform.translation">#</a>
        </h4>
        <div class="doc">
<p>The current translation is the difference in canvas units between the
actual center of the canvas and the currently specified center. For
example, if the actual canvas center is (5, 5) but the current center is
(6, 6), the translation is (1, 1).</p>
<pre class="source">
vec2 get translation =&gt; extents - center;
</pre>
<pre class="source">
void set translation(vec2 translation) {
 center.copyFrom(extents).sub(translation);
}
</pre>
</div>
</div>
<div class="field"><h4 id="yFlip">
<button class="show-code">Code</button>
bool         <strong>yFlip</strong> <a class="anchor-link"
            href="#yFlip"
            title="Permalink to ViewportTransform.yFlip">#</a>
        </h4>
        <div class="doc">
<pre class="source">
yFlip
</pre>
</div>
</div>
</div>
<div>
<h3>Methods</h3>
<div class="method"><h4 id="getScreenToWorld">
<button class="show-code">Code</button>
void <strong>getScreenToWorld</strong>(<a href="../vector_math/vec2.html">vec2</a> argScreen, <a href="../vector_math/vec2.html">vec2</a> argWorld) <a class="anchor-link" href="#getScreenToWorld"
              title="Permalink to ViewportTransform.getScreenToWorld">#</a></h4>
<div class="doc">
<p>Takes the screen coordinates (argScreen) and puts the
corresponding world coordinates in argWorld. It should be safe
to give the same object as both parameters.</p>
<pre class="source">
void getScreenToWorld(vec2 argScreen, vec2 argWorld) {
 num translationCorrectedX = argScreen.x - translation.x;
 num translationCorrectedY = argScreen.y + translation.y;

 num gridCorrectedX = (translationCorrectedX - extents.x) / scale;
 num gridCorrectedY = ((translationCorrectedY - extents.y) * -1) / scale;
 argWorld.x = gridCorrectedX;
 argWorld.y = gridCorrectedY;
}
</pre>
</div>
</div>
<div class="method"><h4 id="getWorldToScreen">
<button class="show-code">Code</button>
void <strong>getWorldToScreen</strong>(<a href="../vector_math/vec2.html">vec2</a> argWorld, <a href="../vector_math/vec2.html">vec2</a> argScreen) <a class="anchor-link" href="#getWorldToScreen"
              title="Permalink to ViewportTransform.getWorldToScreen">#</a></h4>
<div class="doc">
<p>Takes the world coordinate (argWorld) puts the corresponding
screen coordinate in argScreen.  It should be safe to give the
same object as both parameters.</p>
<pre class="source">
void getWorldToScreen(vec2 argWorld, vec2 argScreen) {
 // Correct for canvas considering the upper-left corner, rather than the
 // center, to be the origin.
 num gridCorrectedX = (argWorld.x * scale) + extents.x;
 num gridCorrectedY = extents.y - (argWorld.y * scale);

 argScreen.x = gridCorrectedX + translation.x;
 argScreen.y = gridCorrectedY - translation.y;
}
</pre>
</div>
</div>
<div class="method"><h4 id="setCamera">
<button class="show-code">Code</button>
void <strong>setCamera</strong>(num x, num y, num s) <a class="anchor-link" href="#setCamera"
              title="Permalink to ViewportTransform.setCamera">#</a></h4>
<div class="doc">
<p>Sets the transform's center to the given x and y coordinates,
and using the given scale.</p>
<pre class="source">
void setCamera(num x, num y, num s) {
 center.setComponents(x,y);
 scale = s;
}
</pre>
</div>
</div>
</div>
        </div>
        <div class="clear"></div>
        </div>
        <div class="footer">
          
        </div>
        <script async src="../client-live-nav.js"></script>
        </body></html>
        
